<template>
 <div>
   <el-form v-model="formSearch" :inline="true" class="demo-form-inline">
     <el-form-item>
       <el-input v-model="formSearch.content" placeholder="请输入分类名称"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">搜索</el-button>
     </el-form-item>
   </el-form>

   <el-row>
     <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddCategory" plain>新增</el-button>
     <el-button type="danger" icon="el-icon-delete" @click="delBatch" plain>批量删除</el-button>
   </el-row>

   <el-table
       :data="categoryList"
       style="width: 100%;margin: 20px 0;"
       row-key="id"
       border
       @selection-change="handleSelectionChange"
       v-loading="loading"
       :tree-props="{children: 'subCategories', hasChildren: 'hasChildren'}">
     <el-table-column type="selection" align="center" width="55"></el-table-column>
     <el-table-column
         prop="id"
         label="ID"
         sortable
         width="200">
     </el-table-column>
     <el-table-column
         prop="parentId"
         label="父级id"
         width="300">
     </el-table-column>
     <el-table-column
         prop="name"
         label="类别名称">
     </el-table-column>
     <el-table-column
         prop="sortOrder"
         label="排序编号"
         width="220">
     </el-table-column>
     <el-table-column prop="status"
                      label="状态"
                      width="120">
       <template slot-scope="scope">

         <el-dropdown  @command="updateStatus">
           <el-button style="border: none;outline: none;box-shadow:none;background: none">
             <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
             <el-tag v-if="scope.row.status === 2" type="info">停用</el-tag>
           </el-button>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 1)">正常</el-dropdown-item>
             <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 2)">停用</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>

       </template>
     </el-table-column>
     <el-table-column label="操作" width="220">
       <template slot-scope="scope">
         <el-button type="primary" icon="el-icon-edit" @click="showEditCategory(scope.row)" circle></el-button>
         <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle></el-button>
       </template>
     </el-table-column>
   </el-table>

   <!--新增分类-->
   <el-dialog title="新增分类" :visible.sync="addDialogFormVisible" width="600px" class="demo-ruleForm">
     <el-form :model="addForm" :rules="rules">
       <el-form-item label="ID" :label-width="formLabelWidth" prop="id">
         <el-input v-model="addForm.id" auto-complete="off" style="width: 330px"></el-input>
       </el-form-item>
       <el-form-item label="父级分类" :label-width="formLabelWidth" prop="parentId">
        <el-select ref="selectTree" v-model="addForm.parentId" placeholder="请选择" popper-class="popperTreeSelect">
          <el-option style="height: 100%; width: 100%" :value="addForm.parentId" :label="label">
            <el-tree
                ref="tree"
                :data="categoryTreeList"
                :props="defaultProps"
                @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
        </span>
            </el-tree>
          </el-option>
        </el-select>
       </el-form-item>
       <el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
         <el-input v-model="addForm.name" auto-complete="off" style="width: 330px"></el-input>
       </el-form-item>
       <el-form-item label="排序编号" :label-width="formLabelWidth">
         <el-input-number placeholder="排序顺序：从高到低" v-model="addForm.sortOrder" controls-position="right" :min="0" style="width: 200px"/>
       </el-form-item>
       <el-form-item label="状态" :label-width="formLabelWidth">
         <el-select v-model="addForm.status" placeholder="请选择状态">
           <el-option label="正常" value="1"></el-option>
           <el-option label="停用" value="2"></el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="addDialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="handleAddSure">确 定</el-button>
     </div>
   </el-dialog>

   <!--编辑分类-->
   <el-dialog title="编辑分类" :visible.sync="editDialogFormVisible" width="600px" class="demo-ruleForm">
     <el-form :model="editForm" :rules="rules">
<!--       <el-form-item label="ID" :label-width="formLabelWidth" prop="id">
         <el-input v-model="editForm.id" auto-complete="off" style="width: 330px"></el-input>
       </el-form-item>-->
       <el-form-item label="父级分类" :label-width="formLabelWidth" prop="parentId">
         <el-select ref="selectTree" v-model="editForm.parentId" placeholder="请选择" popper-class="popperTreeSelect">
           <el-option style="height: 100%; width: 100%" :value="editForm.parentId" :label="label">
             <el-tree
                 ref="tree"
                 :data="categoryTreeList"
                 :props="defaultProps"
                 @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
        </span>
             </el-tree>
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
         <el-input v-model="editForm.name" auto-complete="off" style="width: 330px"></el-input>
       </el-form-item>
       <el-form-item label="排序编号" :label-width="formLabelWidth">
         <el-input-number placeholder="排序顺序：从高到低" v-model="editForm.sortOrder" controls-position="right" :min="0" style="width: 200px"/>
       </el-form-item>
       <el-form-item label="状态" :label-width="formLabelWidth">
         <el-select v-model="editForm.status" placeholder="请选择状态">
           <el-option label="正常" value="1"></el-option>
           <el-option label="停用" value="2"></el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="editDialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="handleEditSure">确 定</el-button>
     </div>
   </el-dialog>
 </div>
</template>

<script>
export default {
  name: "admin-category",
  data() {
    return {
      categoryList: [],
      // categoryTreeList: [], //分类树形集合
      formSearch: {}, //搜索表单
      multipleSelection: {},
      loading: true, //加载动画
      addForm: {
        parentId: ''
      },
      editForm: {
        parentId: ''
      },
      label: '', //表单中的辅助显示
      rules: {
        id: [
          {required: true, message: '请输入分类ID', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        parentId: [
          {required: true, message: '请输入分类父级ID', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入分类名称', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
      },
      formLabelWidth: '120px',
      addDialogFormVisible: false, //添加分类弹框
      editDialogFormVisible: false, //编辑分类弹框
      defaultProps: {
        children: 'subCategories',
        label: 'name'
      },
    }
  },

  computed: {
    //分类树形集合
    categoryTreeList() {
      return [{id: 0, name: '根分类', subCategories: this.categoryList}]
    }
  },

  mounted() {
    this.getCategoryList()
  },
  methods: {
    getCategoryList() {
      this.loading = true
      this.request.get('/category/list', {
        params: {
          content: this.formSearch.content
        }
      }).then((res) => {
        this.categoryList = res
        this.loading = false
      }).catch(e => {
        this.$message.error(e)
      })
    },

    //显示新增弹框
    showAddCategory() {
      this.addDialogFormVisible = true
      this.addForm = {}
      this.label = ''
    },
    //新增确认
    handleAddSure() {
      this.request.post('/category/add', this.addForm).then(() => {
        this.$message.success('添加成功')
        this.addDialogFormVisible = false
        this.getCategoryList()
      }).catch(e => {
        this.$message.error(e)
      })

    },

    //改变单个分类的状态
    handleUpdateStatus(id, status) {
      return {
        id, status
      }
    },
    updateStatus(command) {
      let {id, status} = command
      this.request.put('/category/status/' + id + '/' + status).then(() => {
        this.$message.success('更新成功')
        this.getCategoryList()
      }).catch(e => {
        this.$message.error(e)
      })
    },


    //显示编辑弹框
    showEditCategory(row) {
      this.editDialogFormVisible = true
      this.editForm = {}
      this.label = ''
      this.getCategoryOne(row)
    },
    getCategoryOne(row) {
      this.request.get('/category/' + row.id).then((res) => {
        this.editForm = res
        this.editForm.status = res.status + ''
      }).catch(() => {
        this.$message.error('查询失败，请重试')
      })
    },
    //确认编辑分类
    handleEditSure() {
      this.request.put('/category/update', this.editForm).then(() => {
        this.$message.success("修改成功")
        this.editDialogFormVisible = false
        this.getCategoryList()
      }).catch(e => {
        this.$message.error(e)
      })
    },

    //单个删除
    handleDelete(row) {
      this.$confirm("是否删除该分类", "提示", {
        type: 'error'
      }).then(() => {
        this.request.delete('/category/' + row.id).then(() => {
          this.$message.success("删除成功")
          this.getCategoryList()
        }).catch(e => {
          this.$message.error(e)
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    //批量删除
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delBatch() {
      this.$confirm("是否确认批量删除", "提示", {
        type: 'error'
      }).then(() => {
        console.log('1')
        let ids = this.multipleSelection.map(v => v.id);
        if (ids.length > 0) {
          this.request.delete('/category/' + ids).then(() => {
            this.$message.success('批量删除成功')
            location.reload()
          }).catch(e => {
            this.$message.error(e)
            location.reload()
          })
        } else {
          this.$message.info('当前未选中分类')
        }

      }).catch(() => {
        this.$message.info('取消删除')
      })
    },

    //搜索
    onSubmit() {
      this.getCategoryList()
    },

    //下拉树形菜单
    handleNodeClick(data) {
      this.addForm.parentId = data.id;
      this.label = data.name
      this.$refs.selectTree.blur();
      // this.$refs.tree.getCheckedNodes()
    },


  }
}
</script>

<style lang="scss" scoped>
.popperTreeSelect {
  height: 700px;
}
</style>